<template>
    <div class="container">
      <div class="content">
        <div class="video-wrapper">
        <video ref="videoRef" muted autoplay></video>
        <div v-if="!hasVideoInput" class="tip">{{ tip }}</div>
        <div class="bottom-wrapper">
          <MicroButton :disabled="!hasAudioInput"  @open="openMicro" @close="closeMicro"/>
          <VideoButton :disabled="!hasVideoInput" @open="openVideo" @close="closeVideo"/>
        </div>
      </div>
      <div class="form-wrapper">
        <div class="item">
          <div class="title">请填写您的称呼</div>
      <el-input v-model="form.name" maxlength="20" show-word-limit size="large" placeholder="请输称呼"></el-input>

        </div>
      </div>
      </div>
    
      

    </div>
  
  </template>
  <script setup >
   import MicroButton from './components/MicroButton.vue';
   import VideoButton from './components/VideoButton.vue';
   import socket from '../../../utils/socket';
   import { ElMessage, ElNotification } from 'element-plus'
import { ref } from 'vue';
   import { useDevice} from './use-device'
   import { useRoute,useRouter } from 'vue-router';
   const {openMicro,openVideo,closeMicro,closeVideo, hasVideoInput,hasAudioInput,videoRef,tip} =useDevice()
   const route=useRoute()
   const router=useRouter()
   const joinLoading = ref(false);
   const form = ref({
  name: '',
  avatar: '',
});





function handleJoin() {
  
  try {
    joinLoading.value = true;
    const meetingId = meetingNumber.value;
    // const t = $storage.get(TICKET);
    const token =localStorage.getItem('token');
    const name='aaaa'
    const avatar='http'
    const data = {
      meetingId,
      name,
      avatar,
      token,
    };
    // // 判断是否是当前会议的密钥
    // if (meetingId === t?.meetingId) {
    //   data.ticket = t?.ticket;
    // }
   

    socket.send('JOIN', data);
 
    setTimeout(() => {
      joinLoading.value = false;
    }, 10 * 1000);
  } catch (e) {
    joinLoading.value = false;
   ElMessage.error('您已断开连接，请刷新页面');
  }
}
socket.addEventHandler('JOIN_RESOLVE',(result)=>{
  ElNotification({
    title: '系统通知',
    message: '入会成功',
    type: 'success',
  })
  if (result.ticket) {


  localStorage.setItem('ticket', JSON.stringify({
    meetingId: route.query.meetingId.replace(/-/g, ''),
    ticket: result.ticket,
  }));



  }
  joinLoading.value = false;
  router.push({
    path:'/meeting',
    query:{
      meetingId:meetingNumber.value
    }
  })
})
socket.addEventHandler('JOIN_REJECT', function (result) {
  const { message } = result;
  ElNotification({
    title: '系统通知',
    message: message,
    type: 'error',
  })

  joinLoading.value = false;
});
  </script>
  
  <style scoped lang="scss">
  .container {
  background: white;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  .content {
  //width: 1300px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 80px;
  .video-wrapper{
    width: 800px;
    height: 450px;
    background-color: #000;
    position: relative;
    border-radius: 10px;
    video {
    width: 800px;
    height: 450px;
    object-fit: cover;//完全覆盖容器
    border-radius: 10px;

  }
  .bottom-wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
   gap: 15px;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
   

  }
  .tip{
    position: absolute;
    text-align: center;
    width: 100%;
    top: 50%;
    color: #fff;
    font-size: 18px;
  }
  } 
  .form-wrapper {
  width: 350px;
  height: 450px;
  .item {
  margin-bottom: 10px;
 
.title {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #333;
  padding: 10px;
}
}
}
}
}




  </style>
  